<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的QQ空间</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">
    <!-- 引入图标库 -->
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4342402_7xq3z6l8swe.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="top-nav">
        <div class="nav-container">
            <div class="logo">
                <i class="iconfont icon-qqzone"></i>
                <span>QQ空间</span>
            </div>
            <div class="nav-links">
                <a href="#home" class="active">首页</a>
                <a href="#album">相册</a>
                <a href="#blog">日志</a>
                <a href="#message">留言板</a>
            </div>
            <div class="user-ops">
                <button class="search-btn"><i class="iconfont icon-search"></i></button>
                <button class="settings-btn"><i class="iconfont icon-setting"></i></button>
            </div>
        </div>
    </header>

    <!-- 个人封面区 -->
    <div class="cover-area">
        <img src="./assets/images/cover.jpg" class="cover-img" alt="个人封面">
        <div class="avatar-container">
            <img src="./assets/images/avatar.jpg" class="user-avatar" alt="个人头像">
            <div class="user-info">
                <h1 class="username" id="username">加载中...</h1>
                <p class="signature" id="signature">加载中...</p>
            </div>
        </div>
    </div>

    <!-- 主体内容区 -->
    <div class="main-container">
        <!-- 左侧个人信息栏 -->
        <aside class="sidebar">
            <div class="info-card">
                <h3>个人资料</h3>
                <ul class="info-list" id="infoList">
                    <!-- 动态渲染个人资料 -->
                </ul>
            </div>
            
            <div class="contact-card">
                <h3>联系方式</h3>
                <ul class="contact-list" id="contactList">
                    <!-- 动态渲染联系方式 -->
                </ul>
            </div>
            
            <div class="stats-card">
                <h3>空间数据</h3>
                <div class="stats-grid" id="statsGrid">
                    <!-- 动态渲染统计数据 -->
                </div>
            </div>
        </aside>

        <!-- 右侧主内容区 -->
        <main class="content">
            <!-- 发布动态框 -->
            <div class="post-box">
                <textarea placeholder="分享你的新鲜事..."></textarea>
                <div class="post-tools">
                    <button class="tool-btn"><i class="iconfont icon-picture"></i> 图片</button>
                    <button class="tool-btn"><i class="iconfont icon-video"></i> 视频</button>
                    <button class="tool-btn"><i class="iconfont icon-file"></i> 日志</button>
                    <button class="publish-btn">发表</button>
                </div>
            </div>

            <!-- 动态列表 -->
            <div class="dynamic-list" id="dynamicList">
                <!-- 动态渲染动态内容 -->
            </div>

            <!-- 相册预览区 -->
            <div class="album-section">
                <h2>我的相册 <a href="#album" class="more-link">查看全部</a></h2>
                <div class="album-grid" id="albumGrid">
                    <!-- 动态渲染相册 -->
                </div>
            </div>

            <!-- 日志预览区 -->
            <div class="blog-section">
                <h2>我的日志 <a href="#blog" class="more-link">查看全部</a></h2>
                <div class="blog-list" id="blogList">
                    <!-- 动态渲染日志 -->
                </div>
            </div>
        </main>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <p>© 2025 我的QQ空间 | 大学生个人空间项目</p>
    </footer>

    <!-- 引入脚本 -->
    <script src="./js/api.js"></script>
    <script src="./js/render.js"></script>
    <script src="./js/main.js"></script>
</body>
</html>